// 侧边弹出区域
const app = getApp()
const componentBehavior = require('../../../js/common/ComponentBehavior')

Component({
  options: {
    virtualHost: true // 虚拟化节点
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // 侧边栏弹出方向
    direction: {
      type: String,
      value: 'right',
    },
    // 是否预留底部导航栏空间
    adjustBottom: {
      type: Boolean,
      value: false
    },
    // content背景
    contentBackground: {
      type: String,
      value: '#fff'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showComponent: false, // 是否显示组件
    isIphoneX: app.globalData.isIphoneX, // 是否为iphoneX
    contentCss: '', // 白色内容区css
    iconCss: '', // 图标css
    contentAnimation: {}, // 滑动动画
    background: 'background: #fff;'
  },

  lifetimes: {
    attached() {
      let contentCss = ``
      let iconCss = ``
      let {
        direction,
        adjustBottom
      } = this.data
      let {
        isIphoneX
      } = this.data
      let cssArr = [{
          type: 'right',
          contentCss: `top: 0; right: -500rpx; width: 80%; z-index: 2; bottom: ${adjustBottom ? (isIphoneX? 130 : 100 ) : 0}rpx; `,
          iconCss: `transform: rotate(0); top: 50%; left: 8%;`
        },
        {
          type: 'bottom',
          contentCss: `top: 800rpx; width: 100%; z-index: 2; bottom: ${adjustBottom ? (isIphoneX? 130 : 100 ) : 0}rpx;`,
          iconCss: `transform: rotate(90deg); left: 0; right: 0; margin: 0 auto; top: 80rpx; width: 120rpx;`
        },
        {
          type: 'left',
          contentCss: `top: 0; left: -500rpx; width: 80%; z-index: 2; bottom: ${adjustBottom ? (isIphoneX? 130 : 100 ) : 0}rpx;`,
          iconCss: `transform: rotate(180deg); top: 50%; right: 8%; `
        },
        {
          type: 'top',
          contentCss: `top: 0; width: 100%; z-index: 2; bottom: 800rpx;`,
          iconCss: `transform: rotate(-90deg); left: 0; right: 0; margin: 0 auto; bottom: ${adjustBottom ? (isIphoneX? 216 : 180 ) : 80}rpx; width: 120rpx;`
        },
      ]
      for (let i = 0; i < cssArr.length; i++) {
        if (cssArr[i].type == direction) {
          contentCss = cssArr[i].contentCss
          iconCss = cssArr[i].iconCss
        }
      }
      this.setData({
        contentCss: contentCss,
        iconCss: iconCss
      })
    },
    detached() {}
  },

  observers: {
    showComponent() {
      setTimeout(() => {
        this.initContentAnimation()
      }, 100)
    },
    contentBackground (contentBackground) {
      this.setData({
        background: `background: ${contentBackground};`
      })
    }
  },

  behaviors: [componentBehavior],

  /**
   * 组件的方法列表
   */
  methods: {
    show() {
      this.setData({
        showComponent: true
      })
    },
    hide() {
      this.setData({
        showComponent: false
      })
      this.triggerEvent('hide', {})
    },
    initContentAnimation() {
      let animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in'
      })
      let {
        direction,
        adjustBottom
      } = this.data
      let {
        showComponent,
        isIphoneX
      } = this.data
      if (showComponent) {
        if (direction == 'right') {
          animation.right(0).step()
        } else if (direction == 'bottom') {
          animation.top('180rpx').step()
        }  else if (direction == 'left') {
          animation.left(0).step()
        }  else if (direction == 'top') {
          let bottom = `${adjustBottom ? (isIphoneX ? 316 : 280 ) : 180}rpx`
          animation.bottom(bottom).step()
        }
      } else {
        if (direction == 'right') {
          animation.right('-500rpx').step()
        }  else if (direction == 'bottom') {
          animation.top('800rpx').step()
        }  else if (direction == 'left') {
          animation.left('-500rpx').step()
        }  else if (direction == 'top') {
          animation.bottom('800rpx').step()
        }
      }
      this.setData({
        contentAnimation: animation.export()
      })
    },
  }
})